<template>
  <div>
    <el-form ref="rulesForm" label-position="top" label-width="130px" :model="form" :rules="rules">
      <p class="hint_">基础信息</p>
      <div class="flex_">
        <el-form-item label="场地温度类型：" prop="TEMPERATURE_TYPE">
          <el-select v-model="form.TEMPERATURE_TYPE" clearable placeholder="请选择">
            <el-option v-for="item in budgetUnit.temperatureType" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="能否实现封闭式：" prop="BE_CLOSED">
          <el-select v-model="form.BE_CLOSED" clearable placeholder="请选择">
            <el-option v-for="item in budgetUnit.closed" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="品牌：" prop="EQUIPMENT_BRAND">
          <el-select v-model="form.EQUIPMENT_BRAND" clearable filterable placeholder="请选择">
            <el-option v-for="item in brandOptions" :key="item.BRAND_ID" :label="item.BRAND_NAME" :value="item.BRAND_ID" />
          </el-select>
        </el-form-item>
      </div>
      <div class="flex_">
        <el-form-item label="设备类型：" prop="EQUIPMENT_TYPE">
          <el-cascader v-model="form.EQUIPMENT_TYPE" clearable :options="typeOptions" placeholder="请选择" :props="props" :show-all-levels="false" />
        </el-form-item>
        <el-form-item label="设备编号：" prop="EQUIPMENT_ID">
          <el-input v-model="form.EQUIPMENT_ID" :disabled="equipmentOneId" />
        </el-form-item>
        <el-form-item label="设备型号：" prop="EQUIPMENT_MODEL">
          <el-input v-model="form.EQUIPMENT_MODEL" />
        </el-form-item>
      </div>
      <div class="flex_">
        <el-form-item label="待定：" prop="CONFIGURATION_TYPE">
          <el-input v-model="form.UDF1" />
        </el-form-item>
        <el-form-item label="待定：" prop="PRIORITY">
          <el-input v-model="form.UDF2" />
        </el-form-item>
        <el-form-item label="待定：" prop="PRIORITY">
          <el-input v-model="form.UDF3" />
        </el-form-item>
      </div>
      <p class="hint_">设备规格</p>
      <div class="flex_">
        <el-form-item label="长（mm）：" prop="LENGTH">
          <el-input v-model="form.LENGTH" />
        </el-form-item>
        <el-form-item label="宽（mm）：" prop="WIDTH">
          <el-input v-model="form.WIDTH" />
        </el-form-item>
        <el-form-item label="高（mm）：" prop="HEIGHT">
          <el-input v-model="form.HEIGHT" />
        </el-form-item>
      </div>
      <div class="flex_">
        <el-form-item label="单位：" prop="UNITS">
          <el-input v-model="form.UNITS" />
        </el-form-item>
        <el-form-item label="重量（KG）：">
          <el-input v-model="form.WEIGHT" />
        </el-form-item>
        <el-form-item label="爬坡带直段（mm）：">
          <el-input v-model="form.CLIMB_LENGTH" />
        </el-form-item>
      </div>
      <div class="flex_">
        <el-form-item label="线速度（m/min）：">
          <el-input v-model="form.LINEAR_VELOCITY" />
        </el-form-item>
        <el-form-item label="伸缩长度（mm）：">
          <el-input v-model="form.FLEX_LENGTH" />
        </el-form-item>
        <el-form-item label="电机功率（kw）：">
          <el-input v-model="form.MOTOR_POWER" />
        </el-form-item>
      </div>
      <div class="flex_">
        <el-form-item label="驱动方式：">
          <el-select v-model="form.DRIVE_TYPE" clearable placeholder="请选择">
            <el-option v-for="item in budgetUnit.driveMode" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="分拣流向：">
          <el-input v-model="form.SORTING_FLOW" />
        </el-form-item>
        <el-form-item label="就地单机电气控制装置类型：">
          <el-select v-model="form.ECU_TYPE" clearable placeholder="请选择">
            <el-option v-for="item in budgetUnit.electricType" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
      </div>
      <div class="flex_">
        <el-form-item label="待定：" prop="CONFIGURATION_TYPE">
          <el-input v-model="form.UDF4" />
        </el-form-item>
        <el-form-item label="待定：" prop="PRIORITY">
          <el-input v-model="form.UDF5" />
        </el-form-item>
        <el-form-item label="待定：" prop="PRIORITY">
          <el-input v-model="form.UDF6" />
        </el-form-item>
      </div>
      <el-form-item label="备注：">
        <el-input v-model="form.NOTES" maxlength="300" placeholder="请输入内容" :rows="6" show-word-limit type="textarea" />
      </el-form-item>
      <p class="hint_">价格信息</p>
      <div class="flex_">
        <el-form-item label="不含税价格（RMB）：" prop="PRICE_UNTAX">
          <el-input v-model="form.PRICE_UNTAX" />
        </el-form-item>
        <el-form-item label="含税价格（RMB）：">
          <el-input v-model="form.PRICE_TAX" />
        </el-form-item>
        <el-form-item label="税率">
          <el-input v-model="form.RATE_TAX" />
          <span style="position: absolute; top: 8%; right: 6%; display: table-cell; white-space: nowrap">%</span>
        </el-form-item>
      </div>
      <div class="flex_ close">
        <el-form-item label="含税成本（RMB）：">
          <el-input v-model="form.COST_TAX" />
        </el-form-item>
        <el-form-item label="不含税成本（RMB）：">
          <el-input v-model="form.COST_UNTAX" />
        </el-form-item>
      </div>
      <div class="footer_">
        <el-form-item>
          <el-button @click="reset">重置</el-button>
          <el-button type="primary" @click="submitForm">提交</el-button>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>
<script>
  import budgetUnit from '../common/options'
  import requestMethod from '../common/requestMethod'
  import publicFn from '../common/requestCommon'
  export default {
    name: 'MaterialForm',
    props: {
      equipmentOneId: {
        type: String,
        default: '',
      },
    },
    emits: ['success'],
    data() {
      return {
        props: {
          emitPath: false, //绑定的内容只获取最后一级的value值。
        },
        form: {
          TEMPERATURE_TYPE: '',
          BE_CLOSED: '',
          EQUIPMENT_BRAND: '',
          EQUIPMENT_TYPE: '',
          EQUIPMENT_ID: '',
          EQUIPMENT_MODEL: '',
          CONFIGURATION_TYPE: '',
          LENGTH: '',
          WIDTH: '',
          HEIGHT: '',
          UNITS: '',
          WEIGHT: '',
          CLIMB_LENGTH: '',
          LINEAR_VELOCITY: '',
          FLEX_LENGTH: '',
          MOTOR_POWER: '',
          DRIVE_TYPE: '',
          SORTING_FLOW: '',
          ECU_TYPE: '',
          NOTES: '',
          PRICE_TAX: '',
          PRICE_UNTAX: '',
          RATE_TAX: '',
          COST_TAX: '',
          COST_UNTAX: '',
          UDF1: '',
          UDF2: '',
          UDF3: '',
          UDF4: '',
          UDF5: '',
          UDF6: '',
        },
        budgetUnit,
        rules: {
          TEMPERATURE_TYPE: [{ required: true, message: '请选择温度类型', trigger: 'change' }],
          BE_CLOSED: [{ required: true, message: '请选择能否实现封闭式', trigger: 'change' }],
          EQUIPMENT_BRAND: [{ required: true, message: '请选择品牌', trigger: 'change' }],
          EQUIPMENT_TYPE: [{ required: true, message: '请选择设备类型', trigger: 'change' }],
          EQUIPMENT_ID: [{ required: true, message: '请输入设备编号', trigger: 'blur' }],
          EQUIPMENT_MODEL: [{ required: true, message: '请输入设备编号', trigger: 'blur' }],
          LENGTH: [{ required: true, message: '请输入长', trigger: 'blur' }],
          WIDTH: [{ required: true, message: '请输入宽', trigger: 'blur' }],
          HEIGHT: [{ required: true, message: '请输入高', trigger: 'blur' }],
          UNITS: [{ required: true, message: '请输入单位', trigger: 'blur' }],
          PRICE_UNTAX: [{ required: true, message: '请输入不含税价格（RMB）', trigger: 'blur' }],
        },
        tablePage: {
          '#LIMIT#': 1,
          '#PAGE_SIZE#': 9999,
        },
        brandOptions: [],
        srcArr: [],
        typeOptions: [],
      }
    },
    created() {
      if (this.equipmentOneId) {
        this.lookForm()
      }
      this.getBrand()
      this.getTypeList()
    },
    methods: {
      reset() {
        this.form = {
          TEMPERATURE_TYPE: '',
          BE_CLOSED: '',
          EQUIPMENT_BRAND: '',
          EQUIPMENT_TYPE: '',
          EQUIPMENT_ID: '',
          EQUIPMENT_MODEL: '',
          CONFIGURATION_TYPE: '',
          LENGTH: '',
          WIDTH: '',
          HEIGHT: '',
          UNITS: '',
          WEIGHT: '',
          CLIMB_LENGTH: '',
          LINEAR_VELOCITY: '',
          FLEX_LENGTH: '',
          MOTOR_POWER: '',
          DRIVE_TYPE: '',
          SORTING_FLOW: '',
          ECU_TYPE: '',
          NOTES: '',
          PRICE_TAX: '',
          PRICE_UNTAX: '',
          RATE_TAX: '',
          COST_TAX: '',
          COST_UNTAX: '',
          UDF1: '',
          UDF2: '',
          UDF3: '',
          UDF4: '',
          UDF5: '',
          UDF6: '',
        }
      },
      async getTypeList() {
        let res = await publicFn(requestMethod.TYPE_LIST, { '#LIMIT#': 1, '#PAGE_SIZE#': 99999 })
        console.log(res)
        if (res.code === '00000') {
          this.srcArr = res.data[requestMethod.TYPE_LIST].data
          res.data[requestMethod.TYPE_LIST].data.forEach((item) => {
            if (item.PARAENT_TYPE_ID == 0) {
              this.typeOptions.push({
                parentId: item.PARAENT_TYPE_ID,
                value: item.TYPE_ID,
                label: item.TYPE_NAME,
                children: [],
              })
            }
          })
          this.typeOptions.forEach((it) => {
            it.children = this.getChildren(it.value, this.srcArr)
          })
        } else {
          this.$message({
            type: 'info',
            message: res.msg,
          })
        }
      },
      // 处理级联--递归
      getChildren(tId, srcArr) {
        let children = []
        srcArr.forEach((item) => {
          if (item.PARAENT_TYPE_ID == tId) {
            children.push({
              parentId: item.PARAENT_TYPE_ID,
              value: item.TYPE_ID,
              label: item.TYPE_NAME,
              children: [],
            })
          }
        })
        if (children.length == 0) {
          return null
        }
        children.forEach((item) => {
          item.children = this.getChildren(item.value, this.srcArr)
        })
        return children
      },
      async getBrand() {
        let res = await publicFn(requestMethod.BRAND_LIST, this.tablePage)
        if (res.code === '00000') {
          this.brandOptions = res.data[requestMethod.BRAND_LIST].data
        } else {
          this.$message({
            type: 'info',
            message: res.msg,
          })
        }
      },
      //提交表单
      async submitForm() {
        this.$refs['rulesForm'].validate((valid) => {
          if (valid) {
            this.saveOrEditor()
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      //编辑回显
      async lookForm() {
        let res = await publicFn(requestMethod.EQUIPMENT_ONE, { EQUIPMENT_ID: this.equipmentOneId, ...this.tablePage })
        if (res.code === '00000') {
          this.form = res.data[requestMethod.EQUIPMENT_ONE].data[0]
        } else {
          this.$message({
            type: 'info',
            message: res.msg,
          })
        }
      },
      //新增
      async saveOrEditor() {
        let method = null
        let title = ''
        if (this.equipmentOneId) {
          method = requestMethod.EQUIPMENT_ONE_EDITOR
          title = '编辑成功'
        } else {
          method = requestMethod.EQUIPMENT_SAVE
          title = '新增成功'
        }
        let res = await publicFn(method, { ...this.form })
        if (res.code === '00000') {
          this.$message({
            type: 'success',
            message: title,
          })
          this.$emit('success')
        } else {
          this.$message({
            type: 'info',
            message: res.msg,
          })
        }
      },
    },
  }
</script>
<style lang="scss">
  @import '../static/scss/Dialog.scss';
</style>
